<template>
    <div>
        <el-radio-group v-model="base.bg">
            <el-radio :label="1">默认</el-radio>
            <el-radio :label="2">隐藏</el-radio>
            <el-radio :label="3">自定义</el-radio>
        </el-radio-group>
        <div v-if="base.bg==3">
            <div class="center">定义类型：
                <el-select v-model="base.bt" placeholder="请选择" size="small" style="width: 150px">
                    <el-option label="颜色填充" :value="1"></el-option>
                    <el-option label="背景图片" :value="2"></el-option>
                </el-select>
            </div>
            <div class="center" v-if="base.bt==1">背景颜色：<el-color-picker v-model="base.bc" size="small"></el-color-picker></div>
            <div class="center" v-if="base.bt==2">背景图片：
                <div class="upload show-img" v-if="base.bi">
                    <i class="el-icon-close" @click.stop="base.bi=''"></i>
                    <img :src="base.bi" alt="">
                </div>
                <UploadImg v-else @change="changeBaseBi"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        base: {
            type: Object,
            required: true
        }
    },
    methods: {
        // 上传背景图片
        changeBaseBi(img){
            this.base.bi = img;
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/attr.scss';
</style>

